<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>导航条</title>
  <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
  <link rel="stylesheet" href="./css/ai.css"/>
  
</head>
<body>

<div class="mod-header">
  <div class="cat">
    <div class="cat-box" data-cat="engine">
      <div class="layout">
        <div class="cat-group">
          <h3 class="cat-tit"><div class="cat-ico"><i class="ico-lan"></i></div>自然语言处理</h3>
          <ul class="cat-list">
            <li class="cat-item">
              <div class="cat-item-main">
                <span>基础文本分析</span>
              </div>
              <div class="cat-item-sub">
                <div class="cat-item-row">
                  <a href="#participle">分词/词性</a>
                  <a href="#proper">专有名词</a>
                  <a href="#synonym">同义词</a>
                </div>
              </div>
            </li>
            <li class="cat-item">
              <div class="cat-item-main">
                <span>语义解析</span>
              </div>
              <div class="cat-item-sub">
                <div class="cat-item-row">
                  <a href="#">意图/成分<i class="cat-tag is-beta"></i></a>
                </div>
              </div>
            </li>
            <li class="cat-item">
              <div class="cat-item-main">
                <a href="#">情感分析</a>
              </div>
            </li>
            <li class="cat-item">
              <div class="cat-item-main">
                <span>机器翻译</span>
              </div>
              <div class="cat-item-sub">
                <div class="cat-item-row">
                  <a href="#">文本翻译</a>
                  <a href="#">图片翻译<i class="cat-tag is-new"></i></a>
                  <a href="#">语音翻译<i class="cat-tag is-new"></i></a>
                </div>
              </div>
            </li>
            <li class="cat-item">
              <div class="cat-item-main">
                <a href="#">智能闲聊<i class="cat-tag is-hot"></i></a>
              </div>
            </li>
          </ul>
        </div>
        <div class="cat-group">
          <h3 class="cat-tit"><div class="cat-ico"><i class="ico-image"></i></div>计算机视觉</h3>
          <ul class="cat-list">
            <li class="cat-item">
              <div class="cat-item-main">
                <span>OCR<i class="cat-tag is-hot"></i></span>
              </div>
              <div class="cat-item-sub">
                <div class="cat-item-row">
                  <a href="#identify">身份证识别</a>
                  <a href="#card">名片识别</a>
                  <a href="#driverregistration">行驶证/驾驶证识别</a>
                </div>
                <div class="cat-item-row">
                  <a href="#businesslicense">营业执照识别</a>
                  <a href="#creditcard">银行卡识别</a>
                  <a href="#common">通用识别</a>
                </div>
              </div>
            </li>
            <li class="cat-item">
              <div class="cat-item-main">
                <span>人脸识别</span>
              </div>
              <div class="cat-item-sub">
                <div class="cat-item-row">
                  <a href="#detect">人脸分析</a>
                  <a href="#multiface">多人脸检测<i class="cat-tag is-new"></i></a>
                  <a href="#compare">人脸对比</a>
                  <a href="#search">人脸搜索</a>
                </div>
                <div class="cat-item-row">
                  <a href="#shape">五官定位</a>
                  <a href="javascript:void(0);" class="disabled">人脸核身(即将开放)</a>
                </div>
              </div>
            </li>
            <li class="cat-item">
              <div class="cat-item-main">
                <span>图片识别</span>
              </div>
              <div class="cat-item-sub">
                <div class="cat-item-row">
                  <a href="#scene">物体/场景识别<i class="cat-tag is-beta"></i></a>
                  <a href="#tag">图片标签识别</a>
                  <a href="#express">看图说话</a>
                </div>
                <div class="cat-item-row">
                  <a href="#fuzzy">模糊图片识别</a>
                  <a href="#food">美食图片识别</a>
                  <a href="#plants">花草识别<i class="cat-tag is-hot"></i></a>
                </div>
                <div class="cat-item-row">
                  <a href="#cars">车辆识别<i class="cat-tag is-new"></i></a>
                </div>
              </div>
            </li>
            <li class="cat-item">
              <div class="cat-item-main">
                <span>图片特效<i class="cat-tag is-new"></i></span>
              </div>
              <div class="cat-item-sub">
                <div class="cat-item-row">
                  <a href="#">人脸融合</a>
                  <a href="#">滤镜</a>
                  <a href="#">人脸美妆</a>
                </div>
                <div class="cat-item-row">
                  <a href="#">人脸变妆</a>
                  <a href="#">大头贴</a>
                  <a href="#">颜龄检测</a>
                </div>
              </div>
            </li>
            <li class="cat-item">
              <div class="cat-item-main">
                <a href="#">智能鉴黄</a>
              </div>
            </li>
            <li class="cat-item">
              <div class="cat-item-main">
                <a href="#">暴恐识别</a>
              </div>
            </li>
          </ul>
        </div>
        <div class="cat-group">
          <h3 class="cat-tit"><div class="cat-ico"><i class="ico-voice"></i></div>智能语音</h3>
          <ul class="cat-list">
            <li class="cat-item">
              <div class="cat-item-main">
                <span>语音识别</span>
              </div>
              <div class="cat-item-sub">
                <div class="cat-item-row">
                  <a href="#">语音识别</a>
                  <a href="#">长语音识别<i class="cat-tag is-new"></i></a>
                  <a href="#">关键词检索<i class="cat-tag is-new"></i></a>
                </div>
              </div>
            </li>
            <li class="cat-item">
              <div class="cat-item-main">
                <a href="#">语音合成<i class="cat-tag is-new"></i></a>
              </div>
            </li>
            <li class="cat-item">
              <div class="cat-item-main">
                <span>语音唤醒(即将开放)</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="layout clearfix">
    <a href="/" class="mod-header-logo"></a>

    <div class="mod-header-nav">
      <ul id="jmod-header-nav">
        <li id="nav-header-serv" class="top-cat hassub" data-cat="engine">
          <h2><a href="javascript:void(0);">技术引擎</a><i class="top-cat-arrow"></i></h2>
        </li>
        <li id="nav-header-accelerator" class="top-cat"><h2><a href="#">AI加速器</a></h2></li>
        <li id="nav-header-info" class="top-cat"><h2><a href="#">资讯动态</a></h2></li>
        <li id="nav-header-hr" class="top-cat"><h2><a href="#">AI在腾讯</a></h2></li>
        <li id="nav-header-join" class="top-cat"><h2><a href="#">加入我们</a></h2></li>
        <li id="nav-header-doc" class="top-cat"><h2><a href="#">文档中心</a></h2></li>
      </ul>
      <i class="jmod-nav-slider slider hidden" style="transform: translateX(0px);"></i>
    </div>

    <div class="mod-header-user">
      <a href="#" target="_blank" class="try jmod-header-try">控制台</a>
      <a href="#" target="_blank" class="console jmod-header-console hidden">控制台</a>
    </div>
  </div>

</div>


  <div class="banner jmod_banner">
    <div class="ban cur" style="background-color:#1e1f21;background-image:url('自定义Banner图片地址');height: 62px;">
    </div>
  </div>

  <div style="width: 100%;height: 570px;background-color: #0a0a0a;color: aliceblue;text-align: center;font-size: 33px;"> 
    滑动内容区域1

  </div>

  <div style="width: 100%;height: 570px;background-color: #c1db19;color: aliceblue;text-align: center;font-size: 33px;"> 
    滑动内容区域2

  </div>

  <div style="width: 100%;height: 570px;background-color: #195adb;color: aliceblue;text-align: center;font-size: 33px;"> 
    滑动内容区域3

  </div>

</div>
</body>
<script src="./js/ai.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var header = document.querySelector('.mod-header');
  var headerOffsetTop = header.offsetTop; // 导航栏原始距离顶部的距离

  // 监听滚动事件
  window.addEventListener('scroll', function() {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    // 当页面滚动到导航栏原始位置以下时，固定导航栏
    if (scrollTop >= headerOffsetTop) {
      header.classList.add('fixed');
    } else {
      // 如果页面继续向上滚动，隐藏导航栏
      header.classList.remove('fixed');
    }
  });
});

</script>
</html>
